@extends('layouts.base')




@section('styles')
<style>
    .carouselImageText {
        width:80%;
        text-align:center;
        position: absolute;
        bottom: 5px;
        left: 10%;
        color: white;
        background-color: rgba(0,0,0,0.7);
    }
    .carouselImageTextTopLeft {
        position: absolute;
        top: 5px;
        left: 5px;
        color: white;
        background-color: rgba(0,0,0,0.7);
    }
    .carouselImageTextTopRight {
        position: absolute;
        top: 5px;
        right: 5px;
        color: white;
        background-color: rgba(0,0,0,0.7);
    }
    .carouselImage {

    }
</style>
@endsection




@section('content')








@endsection





@section('scripts')
<script>
    $('#slider').slick({
        lazyLoad: 'ondemand',
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        autoplay: true,
        autoplaySpeed: 800,
    });
</script>
@endsection

